<template>
	<view>

		<view class="head">

			<view>
				<image :src="data.thumb" />
				<view>
					<view>{{ data.name }}</view>
					<view>{{ data.title }}</view>
				</view>
			</view>

			<view>
				<view>救治案例</view>
			</view>

		</view>

		<view class="card">
			<view>
				<view>{{ this.month.find(item => {
						return item.selected;
					}).num
				}}位</view>
				<view>{{ this.month.find(item => {
						return item.selected;
					}).day
				}}预约人数</view>
			</view>
			<view>
				<view>{{ data.score }}</view>
				<view>医生评分</view>
			</view>
		</view>

		<view class="date">
			<view class="green">预约时间</view>
			<view>今天是{{ date }}</view>
		</view>

		<view class="month">
			<view v-for="(item, index) in month" @click="selectDate(item.day, index)">
				<view>{{ item.day }}</view>
				<view :class="filterMonth(item.day) === 1 ? item.selected ? 'selected' : '' : 'disabled'">{{ item.date
				}}
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="green">医生介绍</view>
		<view v-html="data.content" style="padding:1vh 2.5vw;"></view>
		<view class="btn" @click="targetAdd">立即预约</view>

	</view>
</template>

<script>
import {
	doctorDetail,
	doctorNum
} from '../../request/index.js'
import baseUrl from '../../request/baseUrl.js'
export default {
	data() {
		return {
			data: '',
			date: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日',
			month: [],
		}
	},
	onShow() {

	},
	onLoad({
		id,
		did
	}) {
		doctorDetail({
			id: id,
			did: did
		}).then(res => {
			// console.log(res.data);
			this.data = res.data.list;
			this.data.id = id;
			this.data.did = did;
			if (this.data.thumb.indexOf('https://thirdwx.qlogo.cn') < 0 && this.data.thumb.indexOf(baseUrl) <
				0) {
				this.data.thumb = baseUrl + this.data.thumb
			}
		});
		this.month = this.getMonth();

		// console.log(this.month);
		setInterval(() => {
			if (new Date().getDate() !== this.month[0].date) {
				let time = new Date();
				this.date = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日';
				this.month = this.getMonth();
			}
		}, 1000)

	},
	methods: {
		targetAdd() {
			// console.log({
			// 	sectionid: this.data.id,
			// 	doctorid: this.data.did,
			// 	time: this.month.find(item => {
			// 		return item.selected;
			// 	}).time
			// });
			let count = 0;
			this.month.forEach(item => {
				if (this.filterMonth(item.day) && item.selected) {
					count++;
				}
			})
			if (count) {
				uni.navigateTo({
					url: `/pages/add/index?data=${JSON.stringify({
						sectionid: this.data.id,
						doctorid: this.data.did,
						time: this.month.find(item => {
							return item.selected;
						}).time
					})}`
				})
				return
			}
			if (!count) {
				this.$refs.uToast.show({
					message: `请选择预约日期`,
					duration: 1000,
				})
			}
		},
		selectDate(day, index) {
			if (this.filterMonth(day)) {
				this.month.forEach(item => {
					item.selected = false;
				})
				this.month[index].selected = true;
			} else {
				this.$refs.uToast.show({
					message: `该医生${day}休息`,
					duration: 1000,
				})
			}
		},
		getMonth() {
			let time = new Date(),
				arr = new Array(7),
				monthStr = ['周日', "周一", '周二', '周三', '周四', '周五', '周六'];
			for (let i = 0; i < arr.length; i++) {
				arr[i] = {};
				let thisTime = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * i);
				let fullYear = thisTime.getFullYear();
				let month = (thisTime.getMonth() + 1);
				let date = thisTime.getDate();
				let day = thisTime.getDay();
				arr[i].time = `${fullYear}-${month}-${date}`;
				arr[i].day = monthStr[day];
				arr[i].date = date;
				arr[i].selected = false;
				arr[i].num = 0;
				arr[0].selected = true;
			}
			arr.forEach(item => {
				doctorNum({
					id: this.data.uid,
					time: item.time
				}).then(res => {
					item.num = res.data.num
				});
			})
			return arr;
		},
		filterMonth(day) {
			switch (day) {
				case '周一':
					return this.data.mon;
				case '周二':
					return this.data.tue;
				case '周三':
					return this.data.wed;
				case '周四':
					return this.data.thu;
				case '周五':
					return this.data.fri;
				case '周六':
					return this.data.sat;
				case '周日':
					return this.data.sun;
			}
		}
	}
}
</script>

<style lang="scss">
page {
	padding: 2vh 2.5% 7vh 2.5%;
	box-sizing: border-box;
	width: 100%;
}

.btn {
	width: 80%;
	height: 6.5vh;
	background: #44cf7c;
	color: white;
	position: fixed;
	bottom: 1vh;
	left: 50%;
	font-size: 20px;
	display: grid;
	place-content: center;
	transform: translateX(-50%);
	border-radius: 25px;
}

.selected {
	background: #44cf7c !important;
	color: white;
}

.disabled {
	background: rgba(100, 100, 100, .3) !important;
	color: black;
	position: relative;

	&::after {
		content: '休';
		position: absolute;
		top: 0;
		left: 0;
		font-size: 12px;
		background: red;
		padding: .5px;
		color: white;
	}
}

.head {
	display: flex;
	justify-content: space-between;

	>view:last-child {
		>view {
			border: 1px solid #fec776;
			border-radius: 20px;
			color: #ff9900;
			padding: .6vh 2.5vw;
			font-size: 15px;
			background: #fdf6ec;
		}
	}

	>view:first-child {
		display: flex;
		align-items: center;

		>image {
			width: 16vw;
			height: 16vw;
			border-radius: 2vw;
			margin: 0 2vw;
		}

		view {
			>view:first-child {
				font-size: 20px;
				margin-bottom: .85vh;

				&::after {
					content: ' 医生';
					font-size: 17px;
					color: #a3a3a3;
				}
			}

			>view:last-child {
				font-size: 17px;
			}
		}
	}

}

.card {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 3vh 0;

	>view {
		width: 47%;
		border-radius: 5px;
		padding: 2.25vh 0;

		&:first-child {
			background: #fcf0d8;

			>view {
				display: flex;
				justify-content: center;

				&:last-child {
					color: #8b897c;
					margin-top: .7vh;
					font-size: 17px;
					font-size: 17px;
				}
			}
		}

		&:last-child {
			background: #b5f5f4;

			>view {
				display: flex;
				justify-content: center;

				&:last-child {
					color: #8b897c;
					margin-top: .7vh;
					font-size: 17px;
				}
			}
		}
	}
}

.date {
	display: flex;
	justify-content: space-between;
	align-items: center;

	>view:last-child {
		font-size: 13px;
	}
}

.green {
	font-size: 17.5px;
	color: #44cf7c;
}

.month {
	display: flex;
	justify-content: space-between;
	margin: 2.5vh 1vw;

	>view {
		>view:first-child {
			margin-bottom: 1.25vh;
			text-align: center;
		}

		>view:last-child {
			background: #efefef;
			// border-radius: 50%;
			display: grid;
			place-content: center;
			width: 10vw;
			height: 10vw;
			font-size: 13px;
		}
	}
}
</style>
